import { PageContainer, ProBreadcrumb, ProLayout } from '@ant-design/pro-layout';
import { Link, Outlet, useAppData, useLocation } from 'umi';
import logoImg from '../assets/logo.png'
import { ConfigProvider } from 'antd';
import './index.less'

export default function Layout() {
  const { clientRoutes } = useAppData();
  const location = useLocation();
  return (
    <ConfigProvider
    theme={{
      token: {
        // Seed Token，影响范围大
        // colorPrimary: '#00b96b',
        borderRadius: 0,

        // 派生变量，影响范围小
        // colorBgContainer: '#f6ffed',
      },
    }}
  >
    <ProLayout
      layout='top'
      style={{ minHeight: '100vh', height: '100%' }}
      route={clientRoutes[0]}
      location={location}
      title="Network Miner"
      menuItemRender={(menuItemProps, defaultDom) => {
        if (menuItemProps.isUrl || menuItemProps.children) {
          return defaultDom;
        }
        if (menuItemProps.path && location.pathname !== menuItemProps.path) {
          return (
            <Link to={menuItemProps.path} target={menuItemProps.target}>
              {defaultDom}
            </Link>
          );
        }
        return defaultDom;
      }}
      // menuHeaderRender={(logo, title) => logo}
      logo={<img src={logoImg}/>}
      // headerContentRender={() => {
      //   return <ProBreadcrumb />;
      // }}
    >
      <PageContainer
      style={{minHeight: '100%', height: '600px'}}
      token={{
        // paddingBlockPageContainerContent: 0,
        // paddingInlinePageContainerContent: 0,
      }}
      >
        <Outlet />
      </PageContainer>
    </ProLayout>
    </ConfigProvider>
  );
}